<template>
    <div>
      <el-button size="small" type="primary" class="addButton">新增角色</el-button>
      <!-- <el-button type="primary" :icon="Edit" circle /> -->
      <el-table :data="tableData" style="width: 100%" >
      <el-table-column label="角色名称" prop="role_name" />
      <el-table-column label="角色内容" prop="description" />
      <el-table-column align="right">
        <template #header>
          <el-input v-model="search" size="small" placeholder="Type to search" />
        </template>
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
            编辑
          </el-button>
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    </div>
</template>
  
  <script setup>
  import { computed, onMounted, ref } from 'vue'
  import {getRoles} from "../../api/user"

  const tableData = ref([])
  
  const qGetRoles = ()=>{
    getRoles().then(res=>{
        console.log(res)
        tableData.value = res.data
    })
  }
  

  
  const search = ref('')
  const filterTableData = computed(() =>
    tableData.filter(
      (data) =>
        !search.value ||
        data.name.toLowerCase().includes(search.value.toLowerCase())
    )
  )
  const handleEdit = () => {
    console.log(index, row)
  }
  const handleDelete = () => {
    console.log(index, row)
  }
  
//   const tableData  = [
//     {
//       date: '2016-05-03',
//       name: 'Tom',
//       address: 'No. 189, Grove St, Los Angeles',
//     },
//     {
//       date: '2016-05-02',
//       name: 'John',
//       address: 'No. 189, Grove St, Los Angeles',
//     },
//     {
//       date: '2016-05-04',
//       name: 'Morgan',
//       address: 'No. 189, Grove St, Los Angeles',
//     },
//     {
//       date: '2016-05-01',
//       name: 'Jessy',
//       address: 'No. 189, Grove St, Los Angeles',
//     },
//   ]


  onMounted(()=>{
    qGetRoles()
  })

  </script>
<style lang="scss" scoped>
   .addButton{
    margin-bottom: 10px;
   }
   .el-table{
    border-top: 1px solid #bcbcbc;
   }
</style>